<!-- 学员基础信息 -->
<template>
  <div class="xyInformation">
    <div class="search">
      <el-form
        ref="form"
        :model="queryParams.params"
        label-width="0"
        style="display: flex; align-items: center"
      >
        <el-form-item style="margin-bottom: 0px">
          <el-input
            v-model="queryParams.params.name"
            placeholder="培训姓名"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="button">
        <el-button type="primary" icon="el-icon-search" @click="inquire"
          >查询</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="InformationFilling('add')"
          >新增学员信息</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-download"
          @click="ImportTemolate"
          >下载导入模版</el-button
        ><el-button type="primary" icon="el-icon-upload2" @click="chooseFile"
          >导入</el-button
        >
        <input
          ref="upFile"
          class="file"
          name="file"
          type="file"
          style="display: none"
          @change="doImport"
        />
        <!-- <el-button type="danger" icon="el-icon-back" @click="goBack" style="margin-left: 10px"
          >返回</el-button
        > -->
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="calc(100vh - 200px)"
        :header-cell-style="{
          background: '#f2f3f4',
          color: '#555',
          'font-weight': 'bold',
          'line-height': '32px',
        }"
      >
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="80">
        </el-table-column>
        <el-table-column prop="workplace" label="工作单位"> </el-table-column>
        <el-table-column prop="position" label="岗位/工种" width="100">
        </el-table-column>
        <el-table-column prop="education" label="学历" width="80">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="120">
        </el-table-column>
        <el-table-column prop="politicalStatus" label="政治面貌" width="80">
        </el-table-column>
        <el-table-column prop="graduatingSchool" label="毕业院校">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="260">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-view"
              @click="InformationFilling('look', scope.row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="InformationFilling('update', scope.row)"
              >修改</el-button
            >
            <el-popconfirm
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="InformationDel(scope.row)"
              title="确定删除吗？"
            >
              <el-button
                type="danger"
                size="small"
                icon="el-icon-delete"
                slot="reference"
                style="margin-left: 10px"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      top="10px"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div class="formData">
        <el-form
          :model="queryMap"
          ref="quweryMap"
          :disabled="disabled"
          label-width="100px"
          :rules="rules"
        >
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="queryMap.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="queryMap.gender">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
           
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input
              v-model="queryMap.idCard"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>
          <el-form-item label="工作单位" prop="workplace">
            <el-input
              v-model="queryMap.workplace"
              placeholder="请输入工作单位"
            ></el-input>
          </el-form-item>
          <el-form-item label="岗位/工种" prop="position">
            <el-input
              v-model="queryMap.position"
              placeholder="请输入岗位/工种"
            ></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="education">
            <el-input
              v-model="queryMap.education"
              placeholder="请输入学历"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="queryMap.phone"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="民族" prop="ethnicity">
            <el-input
              v-model="queryMap.ethnicity"
              placeholder="请输入民族"
            ></el-input>
          </el-form-item>
          <el-form-item label="籍贯" prop="birthplace">
            <el-input
              v-model="queryMap.birthplace"
              placeholder="请输入籍贯"
            ></el-input>
          </el-form-item>
          <el-form-item label="出生年月" prop="dob">
            <el-date-picker
              style="width: 100%"
              value-format="yyyy-MM-dd"
              v-model="queryMap.dob"
              type="date"
              placeholder="选择出生年月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="政治面貌" prop="politicalStatus">
            <el-input
              v-model="queryMap.politicalStatus"
              placeholder="请输入政治面貌"
            ></el-input>
          </el-form-item>
          <el-form-item label="毕业院校" prop="graduatingSchool">
            <el-input
              v-model="queryMap.graduatingSchool"
              placeholder="请输入毕业院校"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCourse">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchTraineeList,
  fetchTraineeDelete,
  fetchTraineeDeleteIds,
  fetchTraineeTemplate,
  fetchTraineeQuestions,
  fetchTraineeUpdate,
  fetchTraineeAdd,
  fetchTraineeDetail,
} from "@/api/OneStageOneGear/OneStageOneGear.js";
export default {
  data() {
    return {
      tableData: [],
      title: "",
      total: 0,
      queryParams: {
        current: 1,
        orderBy: "",
        params: {
          birthplace: "",
          createTime: "",
          createdBy: "",
          dob: "",
          education: "",
          ethnicity: "",
          gender: "",
          graduatingSchool: "",
          id: "",
          idCard: "",
          isDeleted: true,
          name: "",
          phone: "",
          politicalStatus: "",
          position: "",
          trainingClassInfoId: this.$route.query.id,
          updateTime: "",
          workplace: "",
        },
        size: 10,
      },
      queryMap: {
        birthplace: "",
        createTime: "",
        createdBy: "",
        dob: "",
        education: "",
        ethnicity: "",
        gender: "",
        graduatingSchool: "",
        id: "",
        idCard: "",
        isDeleted: true,
        name: "",
        phone: "",
        politicalStatus: "",
        position: "",
        trainingClassInfoId: this.$route.query.id,
        updateTime: "",
        workplace: "",
      },
      genderOptions: [
        {
          value: "男",
          label: "男",
        },
        {
          value: "女",
          label: "女",
        },
      ],
      dialogVisible: false,
      disabled: false,
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        dob: [{ required: true, message: "请选择出生年月", trigger: "change" }],
        birthplace: [
          { required: true, message: "请输入籍贯", trigger: "blur" },
        ],
        politicalStatus: [
          { required: true, message: "请输入政治面貌", trigger: "blur" },
        ],
        graduatingSchool: [
          { required: true, message: "请输入毕业院校", trigger: "blur" },
        ],
        education: [{ required: true, message: "请输入学历", trigger: "blur" }],
        workplace: [
          { required: true, message: "请输入工作单位", trigger: "blur" },
        ],
        position: [{ required: true, message: "请输入职务", trigger: "blur" }],
        ethnicity: [{ required: true, message: "请输入民族", trigger: "blur" }],
      },
    };
  },
  filters: {
    formatDate(value) {
      if (value) {
        const date = new Date(value);
        return `${date.getFullYear()}-${(date.getMonth() + 1)
          .toString()
          .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
      }
      return value;
    },
  },
  created() {
    this.getList();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    inquire() {
      this.queryParams.current = 1;
      this.getList();
    },
    reset() {
      this.$refs.queryMap.resetFields();
    },
    //下载导入模版
    async ImportTemolate() {
      await fetchTraineeTemplate();
    },
    //导入
    // 只是为了美化一下导入按钮
    chooseFile: function () {
      this.$refs.upFile.dispatchEvent(new MouseEvent("click"));
    },
    doImport(e) {
      const file = e.target.files[0];
      const id = this.$route.query.id;
      fetchTraineeQuestions({ file: file, id: id }).then((res) => {
        if (res.code !== 0) {
          this.$alert(res.data.msg, "导入信息", {
            dangerouslyUseHTMLString: true,
          });
        } else {
          this.$message({
            message: "数据导入成功！",
            type: "success",
          });
          this.getList();
        }
      });
    },
    handleClose(done) {
      done();
    },
    //查看详情
    async InformationDetails(row) {
      let res = await fetchTraineeDetail(row.id);
      this.queryMap = res.data;
    },
    //查看、修改、新增
    InformationFilling(type, row) {
      if (type == "look") {
        this.title = "查看学员信息";
        this.disabled = true;
        this.InformationDetails(row);
      } else if (type == "update") {
        this.title = "修改学员信息";
        this.disabled = false;
        this.InformationDetails(row);
      } else if (type == "add") {
        this.title = "新增学员信息";
        this.queryMap = {
          birthplace: "",
          createTime: "",
          createdBy: "",
          dob: "",
          education: "",
          ethnicity: "",
          gender: "",
          graduatingSchool: "",
          id: "",
          idCard: "",
          isDeleted: true,
          name: "",
          phone: "",
          politicalStatus: "",
          position: "",
          trainingClassInfoId: this.$route.query.id,
          updateTime: "",
          workplace: "",
        };
        this.disabled = false;
      }
      this.dialogVisible = true;
    },
    //新增/修改
    addCourse() {
      this.$refs["quweryMap"].validate(async (valid) => {
        if (valid) {
          if (this.title == "修改学员信息") {
            let res = await fetchTraineeUpdate(this.queryMap);
            if (res.code == 200) {
              this.$message({ message: "修改成功", type: "success" });
              this.dialogVisible = false;
              this.getList();
            }
          } else if (this.title == "新增学员信息") {
            let res = await fetchTraineeAdd(this.queryMap);
            if (res.code == 200) {
              this.$message({ message: "添加成功", type: "success" });
              this.dialogVisible = false;
              this.getList();
            }
          } else {
            this.dialogVisible = false;
          }
        } else {
          console.log("请填写完整信息");
          return false;
        }
      });
    },
    async getList() {
      let res = await fetchTraineeList(this.queryParams);
      this.tableData = res.data.records;
      this.total = res.data.total;
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    async InformationDel(row) {
      let res = await fetchTraineeDelete(row.id);
      if (res.code == 200) {
        this.$message({ message: "删除成功", type: "success" });
        this.getList();
      }else{
        this.$message({ message: "删除失败", type: "error" });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.xyInformation {
  height: calc(100vh - 100px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .search {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .button {
      display: flex;
      justify-content: flex-end;
    }
  }
  .table {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: calc(100% - 50px);
    .pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
  .formData {
    height: 500px;
    overflow: auto;
    padding: 5px;
  }
}
::-webkit-scrollbar {
  width: 8px;
  background-color: #f2f2f2;
  border-radius: 10px;
} /* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #fcfcfc;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #ccc;
}
</style>
